/* 
    Document   : Gallery
    Created on : 01/06/2013, 11:59:52
    Author     : Jeisse
    Description:
        Purpose of the stylesheet follows.
*/
.galleryUL{ padding: 0; margin: 10px; list-style: none; width: 300px; height: 300px; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.galleryUL:after{ clear: both; content: ""; display: table;}
.galleryLi { position: relative; float: left; width: 100px; height: 100px; background: url(' http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png'); cursor: pointer;}
.galleryLi:nth-of-type(3n+1)  { clear: both;}
.galleryImg { position: absolute; display: block; clip: rect(0, 100px, 100px, 0); height:100px; width:100px; -webkit-transition: all 0.2s ease-out, z-index 0s; -moz-transition: all 0.2s ease-out, z-index 0s; transition: all 0.2s ease-out, z-index 0s; opacity: 0.9;}
.galleryLi:hover .galleryImg { clip: rect(0, 300px, 300px, 0); width: 300px; height: 300px; z-index: 2; opacity: 1;}
.galleryLi:nth-of-type(3n+1):hover .galleryImg { left: 310px;}
.galleryLi:nth-of-type(3n+2):hover .galleryImg { left: 210px;}
.galleryLi:nth-of-type(3n):hover .galleryImg { left: 110px;}
.galleryLi:nth-of-type(n+4):nth-of-type(-n+6):hover .galleryImg { top: -100px;}
.galleryLi:nth-of-type(n+7):nth-of-type(-n+9):hover .galleryImg { top: -200px;} 

/*Gallery 2*/
.container {width: 927px; margin: 20px auto 0 auto; border: 1px solid #ccc;}
.cf:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.cf { display: inline-block;}
html[xmlns] .cf {	display: block;}
* html .cf { height: 1%;}
.gallery {width: 100%;}
.gallery ul li img:hover { box-shadow: 0 0 20px -1px blue;}
.gallery .control{text-align:center; margin: auto; width: auto; display: table;}
.gallery .control .btn{ display:block; width:30px; margin: 0 auto;}
.gallery .control .next{  width:0; height:0; border:30px solid #727170; border-top:10px solid transparent; border-left:30px solid transparent; display:block; margin:1px 0; border-right:30px solid transparent;}
.gallery .control .back	{  width:0; margin:1px 0; display:block; height:0; border:30px solid #727170; border-bottom:10px solid transparent; border-left:30px solid transparent; border-right:30px solid transparent;}
.gallery .hint {display:none; opacity: 0; top: 50px; margin-left: 200px; transition: all .6s ease-in; width: 200px; height: 200px; background-color: transparent; position: absolute;}
.gallery ul{ text-align: center; /* for IE */   height: 400px; display: block; }
.gallery .groups {position: absolute; transition: all 1s ease-in; margin:auto;}
.gallery .groups.show { opacity: 1;}
.gallery .groups.hide{ -webkit-transform: scale(1.3); opacity: 0; z-index: -99999;}           
.gallery .groups.next + .groups.hide{ opacity: 0; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); }           
.gallery .groups.next{ z-index: -1;  zoom: 0.5\9; -webkit-transform: scale(0.6);-moz-transform: scale(0.6); opacity: .3; }
.gallery .groups .item:hover .hint { opacity: 1;   display: block;}
.gallery ul {padding:0; margin:0;list-style: none;}
.gallery li {float:left;}
.gallery .item ,.gallery .item img {width: 300px; height: 300px;}
.gallery input[type=checkbox]{ display: none}
.gallery input:checked + label{ display:block; width:300px; height:300px; box-shadow: 0 0 20px -1px blue; }
